<template>
  <div class="wrap">
    <div id="zsgx">
      <!--您现在的位置-->
      <div>
        <h3 class="whead"><span></span>您现在的位置 ：
          <i>监测报告</i>
        </h3>
      </div>
      <div class="themain">
        <div class="wlist" >
          <ul id="gzdtlis" v-for="item in data" :key="item.id">
            <li @click="godetail(item.id)">
              <a :href="'http://file.gcx365.com:8090/'+ item.fieladdr" target="_blank">{{item.title}}<i class="time">{{format(item.timeAdd,'yyyy-MM-dd')}}</i></a>
            </li>
          </ul>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="listPagation.total"
            :current-page="listPagation.pagenow"
            @current-change="setpagenow"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      data: [],
      listPagation: {total: 0, pagenow: 1, pagesize: 10}
    }
  },
  mounted () {
    this.getdata()
  },
  methods: {
    setpagenow (a) {
      this.listPagation.pagenow = a
      this.getdata()
    },
    getdata () {
      var self = this
      var params = {
        pagesize: self.listPagation.pagesize,
        pagenow: self.listPagation.pagenow
      }
      this.axios.post(this.api + '/monitor/monitorReportController/showList.do', this.qs.stringify(params)).then(function (res) {
        self.data = res.data.data
        self.listPagation.total = res.data.count
      })
    },
    format (time, format) {
      var t = new Date(time)
      var tf = function (i) {
        return (i < 10 ? '0' : '') + i
      }
      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
        switch (a) {
          case 'yyyy':
            return tf(t.getFullYear())
          case 'MM':
            return tf(t.getMonth() + 1)
          case 'dd':
            return tf(t.getDate())
        }
      })
    }
  }
}
</script>
<style lang="" scoped>
  @import "../css/working-trends.css";
  em {
    font-style: normal;
  }
.el-pagination{
  text-align: center;
}
  .headd {
    width: 100%;
  }

  .headd h3 {
    text-align: center;
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: 20px;
  }

  .headd p {
    text-align: center;
    font-size: 13px;
  }

  .headd p em {
    display: inline-block;
    margin: 0 20px;
    color: #999;
    margin-bottom: 40px
  }

  .content {
    width: 100%;
  }
  .content p {

    line-height: 30px;
    margin-bottom: 20px;
    font-size: 15px;
    font-family: "微软雅黑";
    text-indent: 2em;
  }
</style>
